<template>
  <el-container class="field-config-container">
    <!-- 顶部导航 -->
    <el-header class="header">
      <div class="logo">
        <el-icon class="logo-icon"><Menu /></el-icon>
        <span class="logo-text">动态字段管理系统</span>
      </div>
      <div class="user-info">
        <el-avatar icon="User" size="small"></el-avatar>
        <span class="user-name">管理员</span>
      </div>
    </el-header>

    <!-- 主内容区 -->
    <el-container>
      <!-- 侧边菜单 -->
      <el-aside width="200px" class="aside">
        <el-menu
          default-active="4"
          class="menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="1">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><User /></el-icon>
            <span>客户管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><ShoppingCart /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><Setting /></el-icon>
            <span>字段配置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 字段配置内容 -->
      <el-main class="main-content">
        <el-card class="content-card">
          <div slot="header" class="card-header">
            <span>字段配置管理</span>
            <div class="card-actions">
              <!-- 模块下拉框 -->
              <el-select
                v-model="selectedModuleId"
                placeholder="请选择模块"
                style="width: 200px; margin-right: 16px;"
                @change="handleModuleChange"
                clearable
              >
                <el-option
                  v-for="module in modulesList"
                  :key="module.id"
                  :label="module.moduleName"
                  :value="module.id"
                ></el-option>
              </el-select>
              <el-button type="primary" icon="Plus" @click="openAddConfigDialog">新增字段</el-button>
            </div>
          </div>

          <!-- 字段配置表格 -->
          <el-table
            :data="fieldConfigsList"
            border
            stripe
            style="width: 100%;"
            size="small"
            v-loading="loading"
          >
            <!-- 序号列 -->
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
            ></el-table-column>

            <!-- 字段信息列 -->
            <el-table-column
              prop="fieldName"
              label="字段名称（英文）"
              width="180"
            ></el-table-column>
            
            <el-table-column
              prop="displayName"
              label="显示名称（中文）"
              width="180"
            ></el-table-column>
            
            <el-table-column
              prop="fieldType"
              label="字段类型"
              width="120"
            ></el-table-column>
            
            <el-table-column
              prop="formComponentType"
              label="表单组件"
              width="140"
              :formatter="formatComponentType"
            ></el-table-column>
            
            <el-table-column
              label="是否必填"
              width="100"
              align="center"
            >
              <template #default="scope">
                <el-switch v-model="scope.row.isRequired" disabled></el-switch>
              </template>
            </el-table-column>
            
            <el-table-column
              label="是否可查询"
              width="100"
              align="center"
            >
              <template #default="scope">
                <el-switch v-model="scope.row.isQueryable" disabled></el-switch>
              </template>
            </el-table-column>
            
            <el-table-column
              prop="sortOrder"
              label="排序号"
              width="100"
              align="center"
            ></el-table-column>

            <!-- 操作列 -->
            <el-table-column
              label="操作"
              width="160"
              align="center"
            >
              <template #default="scope">
                <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" danger @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </el-container>
  </el-container>

  <!-- 新增/编辑字段配置弹窗 -->
  <el-dialog 
    :title="dialogTitle" 
    v-model="dialogVisible"
    width="70%"
    destroy-on-close
  >
    <form-field-config 
      :modules="modulesList"
      :initial-data="formData"
      :module-id="selectedModuleId"
      @submit="handleFormSubmit"
      @cancel="dialogVisible = false"
    ></form-field-config>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
// 导入组件
import FormFieldConfig from '../components/FormFieldConfig.vue'
// 导入API（已修复路径）
import { getAllModules } from '../api/field'
import { 
  getFieldConfigsByModuleId, 
  getFieldConfig,
  saveFieldConfig,
  deleteFieldConfig
} from '../api/fieldConfig'
// 导入图标
import { House, User, ShoppingCart, Setting, Menu, Plus } from '@element-plus/icons-vue'

const router = useRouter()

// 页面状态（修正变量定义语法）
const loading = ref(false)
const modulesList = ref([]) // 模块下拉框数据源
const fieldConfigsList = ref([]) // 字段配置表格数据源
const selectedModuleId = ref(null) // 选中的模块ID
const dialogVisible = ref(false)
const dialogTitle = ref('新增字段配置')
const formData = ref({})

// 格式化组件类型显示文本（修正函数语法）
const formatComponentType = (row) => {
  const componentMap = {
    'text': '单行文本框',
    'number': '数字输入框',
    'select': '下拉选择框',
    'date': '日期选择器',
    'radio': '单选框组',
    'textarea': '多行文本框'
  }
  return componentMap[row.formComponentType] || row.formComponentType
}

// 初始化页面（修正异步函数语法和数据解析）
const init = async () => {
  const loadingInstance = ElLoading.service({ text: '加载中...' })
  try {
    // 加载模块数据（修正接口数据解析逻辑）
    const modulesRes = await getAllModules()
    // 适配常见接口返回格式：若有data字段则取data，否则直接用响应体
    modulesList.value = Array.isArray(modulesRes.data?.data) 
      ? modulesRes.data.data 
      : (Array.isArray(modulesRes.data) ? modulesRes.data : [])
    
    console.log('模块数据解析结果:', modulesList.value)

    // 加载字段配置数据
    if (modulesList.value.length > 0) {
      selectedModuleId.value = modulesList.value[0].id
      await loadFieldConfigs()
    }
  } catch (error) {
    ElMessage.error('初始化失败：' + (error.response?.data?.message || error.message))
    console.error('初始化错误:', error)
  } finally {
    loadingInstance.close()
  }
}

// 加载指定模块的字段配置（修正函数语法）
const loadFieldConfigs = async () => {
  if (!selectedModuleId.value) return

  loading.value = true
  try {
    const fieldRes = await getFieldConfigsByModuleId(selectedModuleId.value)
    // 适配接口返回格式
    fieldConfigsList.value = Array.isArray(fieldRes.data?.data)
      ? fieldRes.data.data
      : (Array.isArray(fieldRes.data) ? fieldRes.data : [])
    console.log('字段配置数据:', fieldConfigsList.value)
  } catch (error) {
    ElMessage.error('加载字段配置失败：' + (error.response?.data?.message || error.message))
    fieldConfigsList.value = []
  } finally {
    loading.value = false
  }
}

// 模块切换事件（修正函数语法）
const handleModuleChange = () => {
  loadFieldConfigs()
}

// 打开新增配置弹窗（修正对象初始化语法）
const openAddConfigDialog = () => {
  if (!selectedModuleId.value) {
    ElMessage.warning('请先选择一个业务模块')
    return
  }

  dialogTitle.value = '新增字段配置'
  // 修正对象属性语法，确保无多余逗号
  formData.value = {
    moduleId: selectedModuleId.value,
    isBaseField: false,
    isRequired: false,
    isQueryable: false,
    isTableDisplay: true,
    sortOrder: 0
  }
  dialogVisible.value = true
}

// 打开编辑配置弹窗（修正异步函数语法）
const handleEdit = async (row) => {
  const loadingInstance = ElLoading.service({ text: '加载中...' })
  try {
    const res = await getFieldConfig(row.id)
    formData.value = res.data?.data || {}
    dialogTitle.value = '编辑字段配置'
    dialogVisible.value = true
  } catch (error) {
    ElMessage.error('加载失败：' + (error.response?.data?.message || error.message))
  } finally {
    loadingInstance.close()
  }
}

// 处理删除配置（修正语法）
const handleDelete = (id) => {
  ElMessageBox.confirm(
    '确定要删除这个字段配置吗？删除后将影响相关数据的展示和表单',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      await deleteFieldConfig(id)
      ElMessage.success('删除成功')
      loadFieldConfigs()
    } catch (error) {
      ElMessage.error('删除失败：' + (error.response?.data?.message || error.message))
    }
  }).catch(() => {
    // 取消删除，空处理
  })
}

// 处理表单提交（修正异步函数语法）
const handleFormSubmit = async (data) => {
  const loadingInstance = ElLoading.service({ text: '保存中...' })
  try {
    await saveFieldConfig(data)
    ElMessage.success(data.id ? '编辑成功' : '新增成功')
    dialogVisible.value = false
    loadFieldConfigs()
  } catch (error) {
    ElMessage.error('保存失败：' + (error.response?.data?.message || error.message))
  } finally {
    loadingInstance.close()
  }
}

// 菜单选择事件（修正switch语法）
const handleMenuSelect = (index) => {
  switch (index) {
    case '1':
      router.push('/')
      break
    case '2':
      router.push('/customer')
      break
    case '3':
      router.push('/order')
      break
    case '4':
      router.push('/field-config')
      break
    default:
      break // 新增默认分支，避免语法警告
  }
}

// 调试：监听模块数据变化（修正watch语法）
watch(modulesList, (newVal) => {
  console.log('模块数据更新:', newVal)
  console.log('下拉框数据源长度:', newVal.length)
}, { deep: true })

// 组件挂载时初始化（修正生命周期调用）
onMounted(() => {
  init()
})
</script>

<style scoped>
/* 修正CSS语法，确保无未闭合选择器 */
.field-config-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.header {
  background: #165DFF;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 24px;
  margin-right: 8px;
}

.logo-text {
  font-size: 18px;
  font-weight: 500;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-name {
  margin-left: 8px;
  font-size: 14px;
}

/* 侧边菜单 */
.aside {
  background: #f5f7fa;
  border-right: 1px solid #e4e7ed;
}

.menu {
  border-right: none;
}

/* 主内容 */
.main-content {
  background: #f5f7fa;
  padding: 24px;
  overflow-y: auto;
}

.content-card {
  height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-actions {
  display: flex;
  align-items: center;
}
</style>